<template>
  <div>
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>告知人信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#cccccc' }"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date" label="客户号码" align="center">
        </el-table-column>
        <el-table-column prop="name" label="客户姓名" align="center">
        </el-table-column>
        <el-table-column prop="address" label="与主被保人关系" align="center">
        </el-table-column>
        <el-table-column prop="address2" label="证件类型" align="center">
        </el-table-column>
        <el-table-column prop="address3" label="证件号码" align="center">
        </el-table-column>
        <el-table-column prop="address4" label="证件有效期" align="center">
        </el-table-column>
        <el-table-column prop="address5" label="生日" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>告知人信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData2"
        border
        :header-cell-style="{ background: '#cccccc' }"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column
        >;
        <el-table-column prop="date" label="告知信息" float="left" width="800">
          <template slot-scope="scope">
            <div v-if="scope.row.html" v-html="scope.row.date"></div>
            <div v-else>{{ scope.row.date }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" width="150">
          <template slot="header">
            <span>投保人</span>
            <br />
            <el-checkbox v-model="checkbox1" @change="handleCheckOneChange"
              >全否</el-checkbox
            >
          </template>
          <template slot-scope="scope" v-if="scope.row.radio">
            <el-radio v-model="scope.row.radio" label="1" @change="changeradio"
              >是</el-radio
            >
            <el-radio v-model="scope.row.radio" label="2" @change="changeradio"
              >否</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="填写内容"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <div class="sp-input" v-if="scope.row.address">
              <span>{{ scope.row.address }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.input1"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address2">
              <span>{{ scope.row.address2 }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.input2"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address3">
              <span>{{ scope.row.address }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.input3"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address4">
              <span>{{ scope.row.address2 }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.input4"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150">
          <template slot="header">
            <span>被保险人</span>
            <br />
            <el-checkbox v-model="checkbox2" @change="handleCheckOneChange2"
              >全否</el-checkbox
            >
          </template>
          <template slot-scope="scope" v-if="scope.row.radio2">
            <el-radio
              v-model="scope.row.radio2"
              label="1"
              @change="changeradio2"
              >是</el-radio
            >
            <el-radio
              v-model="scope.row.radio2"
              label="2"
              @change="changeradio2"
              >否</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="address3"
          label="填写内容"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <div class="sp-input" v-if="scope.row.address">
              <span>{{ scope.row.address }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.inpuT1"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address2">
              <span>{{ scope.row.address2 }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.inpuT2"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address5">
              <span>{{ scope.row.address2 }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.inpuT3"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address6">
              <span>{{ scope.row.address3 }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.inpuT4"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>告知人信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData3"
        border
        :header-cell-style="{ background: '#cccccc' }"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column
        >;
        <el-table-column prop="date" label="告知信息" float="left" width="1000">
        </el-table-column>
        <el-table-column prop="name" align="center" width="350">
          <template slot="header">
            <span>投险人</span>
            <br />
            <el-checkbox v-model="checkbox3" @change="handleChange"
              >全否</el-checkbox
            >
          </template>
          <template slot-scope="scope" v-if="scope.row.radio">
            <el-radio v-model="scope.row.radio" @change="changeradio3" label="1"
              >是</el-radio
            >
            <el-radio v-model="scope.row.radio" @change="changeradio3" label="2"
              >否</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="填写内容"
          align="center"
          width="400"
        >
          <template slot-scope="scope">
            <div class="sp-input" v-if="scope.row.address">
              <span>{{ scope.row.address }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.input1"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address2">
              <span>{{ scope.row.address2 }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.input2"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="sp-input" v-if="scope.row.address3">
              <span>{{ scope.row.address3 }}：</span>
              <el-input
                style="width: 60%"
                v-model="scope.row.input2"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sp-flooter">
      <div class="sp-flooter_le">
        <div class="sp-flooter_le-bton">
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>保存</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>修改</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>删除</span>
            </div>
          </div>
         
        </div>
      </div>
      <div class="sp-flooter_ri">
        <div class="sp-flooter_ri-bton">
          <div class="sp-flooter_ri-margin">
           
            <div class="sp-flooter_botten bottenMargin" @click="tonext()">
              <span>下一步</span>
            </div>
             <div class="sp-flooter_botten bottenMargin">
              <span>进入险种信息</span>
            </div>
            <div class="sp-flooter_botten bottenMargin">
              <span>错误字段标记</span>
            </div>
          </div>
          <div>
        
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: false,
      checkbox3: false,
      checkbox4: false,
      tableData: [],
      tableData2: [
        {
          date: "在过去一年中，您是否在国外累计居住超过6个月或准备在半年内出国?",
          name: "王小虎",
          address: "去往国家",
          address2: "居住时间",
          input1: "",
          input2: "",
          inpuT1: "",
          inpuT2: "",
          radio: "0",
          radio2: "0",
        },
        {
          date: "是否患先天性或遗传相关因素疾病?",
          name: "王小虎",
          address: "疾病名称",
          input1: "",
          inpuT1: "",
          radio: "0",
          radio2: "0",
        },
        {
          date: "女性告知:是否怀孕?是否曾患子宫、卵巢等妇科疾病?是否曾有异常出血或下腹部手术(剖腹产除外)、放射性治疗等?若已怀孕，请填写怀孕日期:",
          name: "王小虎",
          address: "怀孕、疾病或手术治疗",
          address2: "怀孕日期",
          input1: "",
          input2: "",
          inpuT1: "",
          inpuT2: "",
          radio: "0",
          radio2: "0",
        },
        {
          date: "是否有其他寿险公司已生效或正在申请的保险单?",
          name: "王小虎",
          address: "保单状态",
          address2: "保单名称",
          input1: "",
          input2: "",
          inpuT1: "",
          inpuT2: "",
          radio: "0",
          radio2: "0",
        },
        {
          date: "<p>是否目前患有或过去曾经患过下列症状 ,疾病或手术史:</p><p>A.脑、神经系统及精神方面疾病,如:帕金森氏病/综合征、阿尔兹海默氏症、重症肌无力、多发性硬化、反复头痛或眩晕、癫痫、脑血管畸形、脑梗塞、脑出血、短暂性脑缺血发作、脑血管意外、脑瘤、脑部需要或已经手术治疗的疾病、脊髓疾病、智力障碍、精神分裂症、神经官能症、抑郁症、神经衰弱、情感障碍、人格障碍、进食障碍; </p><p>B.心血管的疾病，如:高血压(收缩压140mmHg 以上或舒张压90mmHg 以上)、冠心病、心肌梗塞、心绞痛、心 律失常、先天性心脏病、风湿性心脏病、心内膜炎、心肌病、甲亢性心脏病、 室壁瘤、动脉瘤、心力衰竭，被建 议进一步检查或治疗的心慌及胸闷、胸痛、原因不明的晕厥、 心脏杂音、或被建议进行心导管等心血管介入治疗;</p><p>C.呼吸系统疾病，如:反复咳嗽咳痰、咯血、气喘、 呼吸困难、慢性支气管炎、肺气肿、肺心病、哮喘、支气管扩张、肺结核、尘肺、间质性肺病、肺纤维化、胸腔积液、呼吸衰竭;</p><p>D.消化系统疾病,如:肝区疼痛、肝功能异常、黄疸、便血、食道静脉曲张、胃和/或十二指肠溃疡、胰腺炎、胰腺 假性囊肿、肝炎、乙肝病毒携带、 肝囊肿、多囊肝、肝硬化、肝血管瘤、肝内胆管炎、胆结石、胆囊息肉、脾肿大、慢性或溃疡性结肠炎、肠息肉、腹部外伤或手术史;</p><p>E.泌尿系统疾病,如:尿糖阳性、血尿、蛋白尿、反复尿路感染、尿路畸形、肾移植、肾积水、 肾囊肿、多囊肾、肾结石、尿毒症、肾病综合症、肾脏功能异常、急慢性肾炎、前列腺疾病、泌尿系统外伤或手术史;</p><p>F.骨骼，肌肉，结缔组织的疾病，如:关节红肿或酸痛，类风湿关节炎，强直性脊柱炎，椎间盘突出，股骨头坏死,骨关节炎，肌营养不良症，肌肉萎缩，系统性红斑性狼疮，干燥综合症;</p><p>G.内分泌，血液系统疾病,如:血糖升高,糖尿病,痛风,高尿酸血症,高脂血症,甲状腺或甲状旁腺疾病,脑垂体功能亢|进，肾上腺功能亢进或低下，贫血,脾功能亢进，白血病,淋巴瘤,血友病,再生障碍性贫血,紫癜,原因不明的发热,原因不明皮肤和粘膜及齿龈出血;</p><p>H.五官科疾病，如:原因不明的声音嘶哑，听力下降，耳鸣，复视，视力下降，美尼尔病， 白内障，青光眼，视神经病变，视网膜出血或剥离;</p><p>I.曾经或当前患有恶性肿瘤,原因不明的发热,体重明显变化(一 年内增加或减少超过5公斤)、原因不明的淋巴结肿大、未证实为良性或恶性之甲状腺结节、乳腺结节、肺结节、肝脏结节、胃或肠道息肉等肿瘤、肿块、息肉、量肿、赘生物、结节、黑痣增大;J.五官、脊柱、胸廓、四肢、手足畸形或残疾; </p><p>K.职业病、酒精中毒、吸毒、药物成瘾、化学品滥用、患艾滋病或感染艾滋病病毒?</p>",
          name: "王小虎",
          address: "手术名称",
          address2: "是否治疗",
          address3: "手术名称",
          address4: "是否治疗",
          address5: "手术名称",
          address6: "是否治疗",
          radio: "0",
          radio2: "0",
          input1: "",
          input2: "",
          input3: "",
          input4: "",
          inpuT1: "",
          inpuT2: "",
          inpuT3: "",
          inpuT4: "",
          html: "v-html",
        },
      ],
      tableData3: [
        {
          date: "在过去一年中，您是否在国外累计居住超过6个月或准备在半年内出国?",
          name: "王小虎",
          address: "去往国家",
          address2: "居住时间",
          input1: "",
          input2: "",
          inpuT1: "",
          inpuT2: "",
          radio: "0",
          radio2: "0",
        },
        {
          date: "是否患先天性或遗传相关因素疾病?",
          name: "王小虎",
          address: "疾病名称",
          input1: "",
          inpuT1: "",
          radio: "0",
          radio2: "0",
        },
        {
          date: "女性告知:是否怀孕?是否曾患子宫、卵巢等妇科疾病?是否曾有异常出血或下腹部手术(剖腹产除外)、放射性治疗等?若已怀孕，请填写怀孕日期:",
          name: "王小虎",
          address: "怀孕、疾病或手术治疗",
          address2: "怀孕日期",
          input1: "",
          input2: "",
          inpuT1: "",
          inpuT2: "",
          radio: "0",
          radio2: "0",
        },
        {
          date: "是否有其他寿险公司已生效或正在申请的保险单?",
          name: "王小虎",
          address: "保单状态",
          address2: "保单名称",
          input1: "",
          input2: "",
          inpuT1: "",
          inpuT2: "",
          radio: "0",
          radio2: "0",
        },
      ],
    };
  },
  methods: {
    tonext() {
      this.$emit("tonext", "index3");
    },
    changeradio(e) {
      let num = this.tableData2.filter((item) => item.radio == "2");
      if (this.tableData2.length == num.length) {
        this.checkbox1 = true;
      } else {
        this.checkbox1 = false;
      }
    },
    changeradio2(e) {
      let num = this.tableData2.filter((item) => item.radio2 == "2");
      if (this.tableData2.length == num.length) {
        this.checkbox2 = true;
      } else {
        this.checkbox2 = false;
      }
    },
    changeradio3(e) {
      let num = this.tableData3.filter((item) => item.radio == "2");
      if (this.tableData3.length == num.length) {
        this.checkbox3 = true;
      } else {
        this.checkbox3 = false;
      }
    },
    handleCheckOneChange(e) {
      if (e == true) {
        this.tableData2.map((item) => (item.radio = "2"));
        this.checkbox1 = true;
      } else {
        this.tableData2.map((item) => (item.radio = "1"));
        this.checkbox1 = false;
      }
    },
    handleCheckOneChange2(e) {
      if (e == true) {
        this.checkbox2 = true;
        this.tableData2.map((item) => (item.radio2 = "2"));
      } else {
        this.checkbox2 = false;
        this.tableData2.map((item) => (item.radio2 = "1"));
      }
    },
    handleChange(e) {
      if (e == true) {
        this.tableData3.map((item) => (item.radio = "2"));
      } else {
        this.tableData3.map((item) => (item.radio = "1"));
      }
    },
    handleChange2(e) {
      if (e == true) {
        this.tableData3.map((item) => (item.radio2 = "2"));
      } else {
        this.tableData3.map((item) => (item.radio2 = "1"));
      }
    },
  },
};
</script>
<style scoped>
.sp-input {
  font-size: 12px;
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.sp-input span {
  width: 45%;
}
</style>